<template>
  <div class="all">
    <el-card>
      <template #header>
        <el-row class="search" justify="space-between">
          <el-col :span="6">
            <el-input v-model="orderId" @keyup.enter.native="load" placeholder="输入订单编号" />
          </el-col>
          <el-col :span="12" style="display: flex;justify-content: space-between;">
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="startTime" type="datetime"
              placeholder="选择起始日期时间" default-time="00:00:00">
            </el-date-picker>
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="endTime" type="datetime" placeholder="选择终止日期时间"
              default-time="00:00:00">
            </el-date-picker>
          </el-col>
          <el-col :span="6" style="display: flex; justify-content: flex-end;">
            <el-button type="primary" size=small>搜索</el-button>
            <el-button type="warning " size=small>重置</el-button>
          </el-col>
        </el-row>
      </template>
      <el-table :data="tableData" border style="width: 100%" :row-style="rowStyle">
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <el-table-column align="center" prop="id" label="订单编号" width="150"> </el-table-column>
        <el-table-column align="center" prop="spuName" label="商品名" width="150"></el-table-column>
        <el-table-column align="center" prop="payPrice" label="总价(￥)" width="100"></el-table-column>
        <el-table-column align="center" prop="user.username" label="下单人" width="100">
          <template slot-scope="scope">
            <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
              <el-tooltip class="item" effect="dark" :content="'下单人电话:' + scope.row.user.phone" placement="top">
                <el-tag size="large">{{ scope.row.user.username }} </el-tag>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="linkUser" label="收货人" width="100">
          <template slot-scope="scope">
            <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
              <el-tooltip class="item" effect="dark" :content="'收货人电话:' + scope.row.linkPhone" placement="top">
                <el-tag size="large">{{ scope.row.linkUser }} </el-tag>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="linkAddress" label="送货地址" width="200">
          <template slot-scope="scope">
            <div style="height: 80px; overflow:auto; justify-content: center; align-items: center; display: flex;">
              {{ scope.row.linkAddress }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="stateName" label="状态" width="100"></el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间" width="200"></el-table-column>
        <el-table-column align="center" prop="updateTime" label="更新时间" width="200"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="showDetail(scope.row)">详情</el-button>
            <el-button type="danger" size="small" @click=" returnGoods(scope.row?.id)">退货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: right; align-items: center; margin-top: 10px">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
          :page-size="pageSize" :page-sizes="[2, 5, 10]" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!-- 订单详情 -->
    <el-dialog title="订单详情" :visible.sync="showDialog" width="50%" center>
      <!-- 下单人联系方式 -->
      <el-card shadow="never">
        <template #header>
          <div class="card-header-title">
            <strong class="title">下单人信息</strong>
          </div>
        </template>
        <el-row class="info">
          <el-col :span="6">
            下单人Id: {{ orderVO.user?.id }}
          </el-col>
          <el-col :span="6">
            下单人: {{ orderVO.user?.nickName }}
          </el-col>
          <el-col :span="6">
            联系电话: {{ orderVO.user?.phone }}
          </el-col>
          <el-col :span="6">
            邮箱: {{ orderVO.user?.email }}
          </el-col>
        </el-row>
      </el-card>

      <!-- 收货人联系方式 -->
      <el-card shadow="never">
        <template #header>
          <div class="card-header-title">
            <strong>收货人信息</strong>
          </div>
        </template>
        <el-row class="info">
          <el-col :span="8">
            收货人: {{ orderVO?.linkUser }}
          </el-col>
          <el-col :span="8">
            联系电话: {{ orderVO?.linkPhone }}
          </el-col>
          <el-col :span="8">
            送货地址: {{ orderVO?.linkAddress }}
          </el-col>
        </el-row>
      </el-card>

      <!-- 订单详情 -->
      <el-card shadow="never">
        <template #header>
          <div class="card-header-title">
            <strong class="title">订单明细</strong>
          </div>
        </template>
        <el-row class="info">
          <el-col :span="8">
            订单编号: <el-tag type="primary" size="large">{{ orderVO?.id }}</el-tag>
          </el-col>
          <el-col :span="12">
            商品名称: <el-tag type="success" size="large">{{ orderVO?.spuName }}</el-tag>
          </el-col>
          <el-col :span="4">
            商品数量: <el-tag>{{ orderVO?.count }}</el-tag>
          </el-col>
        </el-row>
        <!-- 订单状态 -->
        <el-row>
          <el-col :span="8">
            订单状态: <el-tag type="success" size="large" v-if="orderVO?.state >= 1">{{ orderVO?.stateName }}</el-tag>
            <el-tag type="warning" size="large" v-else>{{ orderVO?.stateName }}</el-tag>
          </el-col>
          <el-col :span="8">
            下单时间: <el-tag type="primary" size="large">{{ orderVO?.unpaidTime }}</el-tag>
          </el-col>
          <el-col :span="8">
            支付时间: <el-tag type="primary" size="large" v-show="orderVO?.state >= 1">{{ orderVO?.preDeliveryTime
              }}</el-tag>
          </el-col>
          <el-col :span="8">
            发货时间: <el-tag type="primary" size="large">{{ orderVO?.deliveryTime }}</el-tag>
          </el-col>
          <el-col :span="8">
            到达时间: <el-tag type="primary" size="large" v-if="orderVO?.state >= 3">{{ orderVO?.preReceiveTime }}</el-tag>
          </el-col>
          <el-col :span="8">
            完成时间: <el-tag type="success" size="large" v-if="orderVO?.state >= 4">{{ orderVO?.receiveTime }}</el-tag>
          </el-col>
        </el-row>

        <el-card shadow="never">
          <template #header>
            <div style="display: flex; justify-content: center; align-items: center;">
              <strong>商品详情</strong>
            </div>
          </template>
          <el-tag type="primary">{{ orderVO?.detail?.size}}</el-tag>
          <el-tag type="primary">{{ orderVO?.detail?.color}}</el-tag>
        </el-card>
        <!-- 订单价格 -->
        <el-row class="info" style="">
          <el-col :span="6">
            单价: <el-tag type="primary" size="large">{{ orderVO?.price }}</el-tag>￥/双
          </el-col>
          <el-col :span="6">
            总价格: <el-tag type="primary" size="large">{{ orderVO?.totalPrice }}</el-tag>￥
          </el-col>
          <el-col :span="6">
            实际售价: <el-tag type="success" size="large">{{ orderVO?.salePrice }}</el-tag>￥/双
          </el-col>
          <el-col :span="6">
            实际付款: <el-tag type="success" size="large">{{ orderVO?.payPrice }}</el-tag>￥
          </el-col>
          <el-col :span="6">
            付款方式: <el-tag type="warning " size="large" v-if="orderVO?.state == -1">{{ orderVO?.payMethod }}</el-tag>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never">
        <template #header>
          <div style="display: flex; justify-content: center; align-items: center;">
            <strong>退货原因</strong>
          </div>
        </template>
        <p>{{ orderVO?.returnReason || '七天无理由退换' }}</p>
      </el-card>
      <template #footer>
        <el-button type="danger" @click=" returnGoods(orderVO?.id)">同意退货</el-button>
        <el-button type="success" @click="showDialog = false">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>


<script>
import { sOrderCount, sOrderPage, sOrderDetail, sOrderReturn } from "@/api/sOrder";
export default {
  name: "PreDeliveryOrder",
  data() {
    return {
      orderVO: {},
      tableData: [],
      pageNum: 1,
      pageSize: 5,
      total: 0,
      orderId: '',
      startTime: null,
      endTime: null,
      state: -1,
      userId: '',
      countMap: [],
      showDialog: false, //详情抽屉
      // 状态与颜色的映射
      stateColors: {
        '-1': '#eea193',
        '-2': '#eea193',
        // '0': '#f2e8e8',
        // '1': '#d6daec',
        // '2': '#ecebbc',
        // '3': '#eec792',
        '4': '#99eba1',
        '5': '#99eba1'
      }
    };
  },
  created() {
    // this.user = getUser()
    this.load()
  },
  methods: {
    // 主函数
    async load() {
      const { data } = await sOrderPage({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        orderId: this.orderId,
        startTime: this.startTime,
        endTime: this.endTime,
        state: this.state,
        userId: this.userId
      })
      this.tableData = data?.records
      this.pageNum = Number(data?.current)
      this.total = Number(data?.total) | 0
      const { data: countMap } = await sOrderCount()
      this.countMap = countMap
      // console.log(this.tableData)
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    async showDetail(orderVO) {
      this.orderVO = JSON.parse(JSON.stringify(orderVO))
      const detail = JSON.parse(this.orderVO.detail)
      this.orderVO.detail = {size:detail.size,color:detail.color}
      this.showDialog = true

    },
    async returnGoods(orderId) {
      this.$confirm("同意退货?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await sOrderReturn(orderId)
        this.$message.success("已同意退货")
      }).catch(() => { })
      await this.load()
      this.showDialog = false
    },
    rowStyle({ row }) {
      // 根据state值获取对应的颜色
      const color = this.stateColors[String(row.state)];
      return {
        background: color // 如果color不存在，则默认为透明或其他颜色
      }
    }
  },
};
</script>
<style scoped>
